
<template>
   <div>
     <i-frame  v-model:src="fullUrl" v-if="showIFrame" frameborder="0" width="100%" height="100%"></i-frame>
   </div>
 </template>
 
 <script setup>import { ref, onMounted, computed, reactive } from 'vue';
 import iFrame from '@/components/iFrame';
 import { getUserProfile } from "@/api/system/user";
 
 const url = "http://192.168.110.11:8087";
 const showIFrame = ref(true);
 
 const state = reactive({
   user: {},
   roleGroup: {},
   postGroup: {}
 });
 
 function getUser() {
   getUserProfile().then(response => {
     state.user = response.data;
     state.roleGroup = response.roleGroup;
     state.postGroup = response.postGroup;
     console.log("User data:", state.user); // 调试信息
     openNewPage(); // 在获取到用户名后打开新页面
   }).catch(error => {
     console.error("Error fetching user profile:", error);
   });
 };
 
 getUser();
 
 // 计算属性，拼接 URL 和用户名
 const fullUrl = computed(() => {
   if (state.user.userName) {
     return `${url}?username=${state.user.nickName}&phone=${state.user.phonenumber}`;
   }
   return url;
 });
 
 function openNewPage() {
   window.open(fullUrl.value, '_blank');
 }
 
 onMounted(() => {
   // 确保在获取到用户名后再打开新页面
   // 如果需要立即打开新页面，可以在 getUser 的 then 回调中调用 openNewPage
 });
 </script>

<style scoped>
.iframe-container {
  width: 100%;
  height: 100vh; /* 设置高度为视口高度 */
  overflow: hidden; /* 防止滚动条出现 */
  position: relative;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>